<template>
	<view class="process">

		<canvas :style="canvasStyle" class="canvas-content" :canvas-id="canvasId" :id="canvasId">
		</canvas>

		
		<view class="input-range">
			<text> {{ percent }}%</text> 
			<text style="margin-left: 100rpx;"> {{ percent * 3.6 }} </text>
			
			<slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33"
				backgroundColor="#000000" block-color="#8A6DE9"></slider>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: String
				
			},
			// 不要带单位 例如： 300rpx 就写 300
			size: {
				type: Number,
				default: 300
			},
			lineW: {
				type: Number,
				default: 10
			},
			lineColor: {
				type: String,
				default: '#ff0000'
			},
			sAngle: {
				type: String,
				default: 'top' // 可靠值： top, right, bottom, left
			},
			bgColor: {
				type: String,
				default: '#059cdd'
			}
			
		},
		data() {
			return {
				percent: 90,
				canvasId: 'canvasId',
				ctx: null,
			}
		},
		computed: {
			canvasStyle() {
				const obj = {}
				if (this.bgColor) {
					Object.assign(obj, {
						backgroundColor: this.bgColor
					})
				}
				
				
				return {
					...obj,
					width: `${this.size}rpx`,
					height: `${this.size}rpx`,
					
				}
				
			},
			startAngle() {
				switch(this.sAngle) {
					case 'top':
						return 1.5 * Math.PI
						break;
						
					case 'right':
						return 0
						break;	
						
					case 'bottom':
						return Math.PI / 2
						break;	
					
					case 'left':
						return Math.PI
						break;	
						
					default:
						return 1.5 * Math.PI
				}
			},
			box0Style() {
				if (this.percent >= 50) {
					return `transform: rotate(${180 + this.percent*3.6}deg)`
				} else {
					return ``
				}
			},
			box1Style() {
				if (this.percent <= 50) {
					return `transform: rotate(${this.percent*3.6}deg)`
				} else {
					return `display: none;`
				}
			}
		},
		watch: {
			percent() {
				this.drawCircleByProgress()
			}
		},
		mounted() {
			this.ctx = uni.createCanvasContext(this.canvasId, this)
			this.drawCircleByProgress()
		},
		methods: {
			onChange(value) {
				this.percent = value.detail.value
			},
			drawCircleByProgress() {
				
				if (!this.ctx) {
					return
				}
				// 表示进度的两端为圆形  目前没有找到只设置一段的方式
				this.ctx.setLineCap('round'); //圆形     
				const lineW = uni.upx2px(this.lineW)

				// 设置线条的宽度和颜色
				this.ctx.setLineWidth(lineW);
				this.ctx.setStrokeStyle(this.lineColor);
				
				// 2 * Math.PI 表示一个整圆的度数， 除以 100，就是分成100等份，再乘以当前的进度.
				// 这里的进度之所以加上 this.startAngle, 是因为我们修正了起始位置。
				let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;

				this.ctx.beginPath();
				// 半径为整个canvas宽度的一半
				let size = uni.upx2px(this.size) / 2;
				this.ctx.arc(size, size, size - lineW, this.startAngle, endAngle, false);
				this.ctx.file();
				this.ctx.draw();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.process {
		width: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.canvas-content {
			width: 284rpx;
			height: 284rpx;
		}

		.input-range {
			position: absolute;
			top: 750rpx;
			width: 300rpx;
			background-color: #000;
			z-index: 999;
		}

		.box0-parent {
			position: absolute;
			top: 380rpx;
			width: 284rpx;
			height: 284rpx;
			background-color: #dd2124;
			clip: rect(0px, 142rpx, 284rpx, 0px);
			.box0 {
				position: absolute;
				top: 0;
				width: 284rpx;
				height: 284rpx;
				background-color: #2168F9;
				clip: rect(0px, 142rpx, 284rpx, 0px);
				border-radius: 50%;
			}
		}

		.box1-parent {
			position: absolute;
			top: 380rpx;
			width: 284rpx;
			height: 284rpx;
			background-color: #dd2124;
			clip: rect(0px, 284rpx, 284rpx, 142rpx);

			.box1 {
				position: absolute;
				top: 0;
				width: 284rpx;
				height: 284rpx;
				background-color: #2168F9;
				clip: rect(0px, 284rpx, 284rpx, 142rpx);
				border-radius: 50%;
			}
		}

	}
</style>